<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2023-03-16 15:48:04
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2023-04-23 13:17:46
 * @FilePath: \mould\src\views\test\tt.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="dashboard-container">
        <DatePicker :separator="separator" :type="type" :value="defaultDate" :options="options" @on-change="this.pickDate"
            :placeholder="placeholder" :style="{ 'width': width }" @on-ok="this.okPickDate(1)" :confirm="confirm"
            @on-clear="this.okPickDate(0)">
        </DatePicker>

    </div>
</template>
<script>
import 'iview/dist/styles/iview.css'
export default {
    props: {
        separator: {//两个日期间的分隔符
            type: String,
            default: "至"
        },
        type: {//显示类型，可选值为 date、daterange、datetime、datetimerange、year、month
            type: String,
            default: "daterange"
        },
        defaultDate: {
            type: [String, Array],
            // type: Array || String,
            default: null
        },
        placeholder: {
            type: String,
            default: "选择日期"
        },
        width: {
            type: String,
            default: "190px"
        },
        format: {//展示的日期格式 date | daterange: yyyy-MM-dd, datetime | datetimerange: yyyy-MM-dd HH:mm:ss, year: yyyy, month: yyyy-MM
            type: String,
            default: "yyyy-MM-dd"
        },
        multiple: {//开启后，可以选择多个日期，仅在 date 下可用。
            type: Boolean,
            default: false
        },
        size: {//尺寸，可选值为large、small、default或者不设置
            type: String,
            default: "default"
        },
        disabled: {//是否禁用选择器
            type: Boolean,
            default: false
        },
        clearable: {//是否显示清除按钮
            type: Boolean,
            default: true
        },
        readonly: {//完全只读，开启后不会弹出选择器，只在没有设置 open 属性下生效
            type: Boolean,
            default: false
        },
        editable: {//文本框是否可以输入，只在没有使用 slot 时有效
            type: Boolean,
            default: true
        },
        option: {//是否设置快捷选项及设置不可选择的日期
            type: Number,
            default: 0
        },
        dateNum: {
            type: Number,
            default: 6
        },
        confirm: {//是否有确定取消按钮
            type: Boolean,
            default: false
        },



    },
    data() {
        return {
            options: {},
            startTime: {
                type: Number,
            },
            endTime: {
                type: Number,
            },
            defaultDates: "",
            currentDate: "",
            pickerMinDate: '',


        }
    },
    mounted() {
        // if (this.defaultDate != 1 && (this.format == 'yyyy-MM-dd' || this.format == 'yyyy/MM/dd' || this.format == 'yyyy年MM月dd')) {
        //     this.defaultDates = [this.getDay(-this.dateNum), this.getDay(0)]
        // } else if (this.defaultDate != 1 && (this.format == 'yyyy-MM-dd HH:mm:ss' || this.format == 'yyyy/MM/dd HH:mm:ss' || this.format == 'yyyy年MM月dd HH:mm:ss')) {
        //     this.defaultDates = [this.getDay(-this.dateNum) + " " + '00:00:00', this.getDay(0) + " " + this.getDate()]
        // }
        // else {
        //     this.defaultDates = this.getDay(0)
        // }
        if (this.option == 0) {
            this.options = {
                disabledDate(time) {
                    return time.getTime() > Date.now()
                },
                shortcuts: [
                    {
                        text: '今天',
                        value() {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime());
                            return [start, end];
                        },
                    },
                    {
                        text: '昨天',
                        value() {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            return [start, end];
                        },

                    },
                    {
                        text: '最近一周',
                        value() {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            return [start, end];
                        }
                    },
                    {
                        text: '最近一个月',
                        value() {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            return [start, end];
                        }
                    },
                    {
                        text: '最近三个月',
                        value() {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            return [start, end];
                        }
                    },
                    {
                        text: '最近一年',
                        value() {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                            return [start, end];
                        }
                    }
                ]
            }
        } else {
            this.options = {}
        }
        // type
    },
    methods: {
        getDay(day) {
            var today = new Date();
            var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
            today.setTime(targetday_milliseconds); //注意，这行是关键代码
            var tYear = today.getFullYear();
            var tMonth = today.getMonth();
            var tDate = today.getDate();
            tMonth = this.doHandleMonth(tMonth + 1);
            tDate = this.doHandleMonth(tDate);
            return tYear + "-" + tMonth + "-" + tDate;
        },
        doHandleMonth(month) {
            var m = month;
            if (month.toString().length == 1) {
                m = "0" + month;
            }
            return m;
        },
        getDate() {
            var time = new Date();

            const hh = (time.getHours() + "").padStart(2, "0");
            const mm = (time.getMinutes() + "").padStart(2, "0");
            const ss = (time.getSeconds() + "").padStart(2, "0");
            return hh + ":" + mm + ":" + ss;
        },
        pickDate(dates) {
            console.log(dates);
            this.currentDate = dates
            if (this.dateNum != 0) {
                this.$emit("selectPickDate", dates)
            }

            this.startTime = Number(new Date(dates[0])) / 1000;
            this.endTime = Number(new Date(dates[1])) / 1000;
        },
        okPickDate(num) {//点击确定

            if (num == 1) {


                this.$emit("selectPickDate", this.currentDate)
            } else {
                this.$emit("selectPickDate", "")
            }

            // console.log(this.currentDate);
        },
        okPickDates() {//点击确定

            this.$emit("selectPickDate", '')



            // console.log(this.currentDate);
        }

    },
}
</script>
<style scoped lang="less">
.dashboard-container {
    height: 95%;
}

/deep/.ivu-input-icon-normal+.ivu-input {
    width: 96%;
}
</style>
